<%--
  Created by IntelliJ IDEA.
  User: 25431
  Date: 2020/8/24
  Time: 14:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="basePath.jsp"%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>医院前端注册界面</title>
    <!-- Fav  Icon Link -->
    <link rel="shortcut icon" type="image/png" href="${basePath}/afsets/images/fav.png">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="${basePath}/afsets/css/bootstrap.min.css">
    <!-- themify icons CSS -->
    <link rel="stylesheet" href="${basePath}/afsets/css/themify-icons.css">
    <!-- Main CSS -->
    <link rel="stylesheet" href="${basePath}/afsets/css/styles.css">
    <link rel="stylesheet" href="${basePath}/afsets/css/green.css" id="style_theme">
    <link rel="stylesheet" href="${basePath}/afsets/css/responsive.css">

    <script src="js/modernizr.min.js"></script>

</head>

<body class="auth-bg">
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<!-- Color Changer -->
<div class="theme-settings" id="switcher">
		<span class="theme-click">
			<span class="ti-settings"></span>
		</span>
    <span class="theme-color theme-default theme-active" data-color="green"></span>
    <span class="theme-color theme-blue" data-color="blue"></span>
    <span class="theme-color theme-red" data-color="red"></span>
    <span class="theme-color theme-violet" data-color="violet"></span>
    <span class="theme-color theme-yellow" data-color="yellow"></span>
</div>
<!-- /Color Changer -->
<div class="wrapper">
    <!-- Page Content  -->
    <div id="content">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 auth-box">
                    <div class="lochana-box-shadow">
                        <h3 class="widget-title">Register</h3>
                        <form class="widget-form" method="post" action="/toregister/register">
                            <!-- form-group -->
                            <div class="form-group row">
                                <div class="col-sm-12">
                                    <c:if test="${not empty loginError}">

                                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                            <strong>${loginError}</strong>
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    </c:if>
                                    <input type="text" placeholder="姓名" name="name" class="form-control" data-validation="strength" data-validation-strength="2"
                                           data-validation-has-keyup-event="true" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
                                </div>

                                <div class="col-sm-12">

                                    <input name="phone" type="text" id="phoneId" placeholder="电话:" class="form-control" required="" data-validation="length alphanumeric" data-validation-length="3-12"
                                           data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)" data-validation-has-keyup-event="true" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                                </div>
                                <div class="col-sm-12">
                                    <input type="password" placeholder="密码" name="password" class="form-control" data-validation="strength" data-validation-strength="2"
                                           data-validation-has-keyup-event="true" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" placeholder="验证码：" name="verCode" class="form-control" data-validation="strength" data-validation-strength="2"
                                           data-validation-has-keyup-event="true"maxlength="4"  onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
                                </div>
                            </div>
                            <div class="button-btn-block">
                                <button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
                            </div>

                        </form>
                        <button name="" id="getCode" class="btn btn-primary btn-lg btn-block"onclick="sendCode(this)">发送短信验证码</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Page Content  -->
</div>
<!-- Jquery Library-->
<script src="${basePath}/afsets/js/jquery-3.2.1.min.js"></script>
<!-- Popper Library-->
<script src="${basePath}/afsets/js/popper.min.js"></script>
<!-- Bootstrap Library-->
<script src="${basePath}/afsets/js/bootstrap.min.js"></script>
<!-- Custom Script-->
<script src="${basePath}/afsets/js/custom.js"></script>

<script>
    function sendCode(btn){
        var phoneNum =document.getElementById("phoneId").value;
        $.ajax({
            type:"post",
            url: "${basePath}toregister/send",
            data: {phone: phoneNum},
            success: function(json){
                //console.log(json);
                alert("获取验证码成功");
            }
        });
        time(btn);
    }

    var wait = 60;
    function time(btn) {
        if (wait == 0) {
            btn.removeAttribute("disabled");
            btn.innerHTML = "免费获取验证码";
            wait = 60;
        } else {
            btn.setAttribute("disabled", true);
            btn.innerHTML = wait + "秒后重新获取验证码";
            console.log(wait + "秒后重新获取验证码");
            wait--;
            setTimeout(function () {
                    time(btn);
                },
                1000)
        }
    }

</script>

</body>
</html>
